<template>
  <div class="product-date">
    <div class="select-date-content" :class="{'init':productDate[0]===undefined}">
      <p>
        剩余
        <span class="remainingTime">{{day}}</span>
        <span class="expirationTime">{{productEndTime}}</span>
        <span class="red">到期</span>
      </p>
      <slot>
        <span class="date-btn">
          <i class="iconfont icon-choosed iconrili1"></i>
        </span>
      </slot>
      <div class="product-title">
        <div>
          <p>
            <i>○</i>
            <span>{{productTitle}}</span>
            <i>○</i>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { computeProductTime, getTimeStamp } from "assets/js/utils.js";
export default {
  props: {
    productDate: {
      type: Array,
      default: () => []
    },
    index:{
        type:Number,
        default:0
    },
    productTitle:{
        type:String,
        default:''
    }
  },
  data() {
    return {
      productEndTime: "-----------",
      day: "-----------",
      productStartTime: "",
      timer:null
    };
  },
  watch: {
    productDate: {
      handler(newV) {
        this.productEndTime = newV[1];
        this.productStartTime = newV[0];
        this.day = computeProductTime(newV[0], newV[1]);
      },
      deep: true
    }
  },
  mounted() {
    if (this.productDate[0] !== undefined) {
      this.productEndTime = this.productDate[1];
      this.productStartTime = this.productDate[0];
      this.day = computeProductTime(this.productDate[0], this.productDate[1]);
    }
    // this.updateTime();
  },
  methods: {
    // updateTime() {
    //   if(this.timer != null){
    //     clearInterval(this.timer);
    //   }
    //   this.timer = setInterval(() => {
    //     this.day = computeProductTime(this.productDate[0], this.productDate[1]);
    //   }, 60000);
    // }
  },
  // 最后在beforeDestroy()生命周期内清除定时器：
  // beforeDestroy() {
  //   clearInterval(this.timer);
  //   this.timer = null;
  //   console.log("beforeDestroy");
  // }
};
</script>

<style lang="stylus" scoped>
.select-date-content {
  margin-bottom:25px;
  padding: 30px 30px 20px 30px;
  box-sizing: border-box;
  border: 1px solid #1890ff;
  box-shadow: 0 3px 0 #d7ebff;
  border-radius: 5px;
  width: 100%;
  max-width: 350px;
  position: relative;
  cursor: pointer;

  p {
    font-size: 16px;
    color: #919191;

    span {
      color: #333333;
    }

    span.red {
      color: #ef1818;
      margin 0 5px
    }

    .remainingTime {
      margin: 0 15px 0 5px;
    }
  }

  .date-btn {
    color: #1890ff;
    position: absolute;
    top: 26px;
    right: 36px;

    i {
      font-size: 20px;
    }
  }

  .product-title {
    font-size: 18px;
    position: absolute;
    top: -14px;
    left: 20px;
    width: 100%;
    overflow: hidden;

    div {
      color: #1890ff;
    }

    p {
      display: inline-block;
      color: #1890ff;
      overflow: hidden;
      width: 100%;

      i {
        background: #ffffff;
      }
    }

    span {
      color: #333;
      padding: 0 8px;
      display: inline-block;
      vertical-align: middle;
      background: #fff;
      white-space: nowrap;
      max-width: 80%;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

div.init {
  border: 1px solid #78909c;
  box-shadow: 0 3px 0 #eeefef;

  .product-title {
    p {
      color: #78909c;
    }
  }
}
</style>